<template>
  <div style="width: 100%;">
    <div  class="excel_container">
      <div class="left">{{ fileName || '云资源评价报表' }}.xlsx</div>
      <el-button type="primary" @click="downloadBmExcel">下载</el-button>
      <el-button type="primary" @click="preview">预览</el-button>
      <el-button type="primary" @click="preview('print')">打印</el-button>
    </div>
  </div>
</template>
<script>
import XLSX from 'xlsx/xlsx.js'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import routerContextPath from '../../mixins/router-context-path.js'

export default {
  name: 'customExcel',
  components: {VueOfficeExcel},
  mixins: [routerContextPath],
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    fileName: {
      type: String,
      default: '云资源评价报表'
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
  },
  data() {
    return {
      options: ['指标名称', '资源类别', '指标定义', '权重分数', '使用角色', '供应方', '需求方', '更新时间', '是否启用'],
      print:[{
        Startime: '',
        Endtime: '',
        LabelType: '',
      }],
			json_fields:{},
      arrayBufferContent: '',
    }
  },
  created(){
  },
  watch: {
  },
  methods: {
    formatExcel() {
      // if (!this.value) {
      //   this.$message.warning('请配置表头内容')
      //   return
      // } else {
        let tableHeader = this.value && this.value.split(',') || []
        let jsonDataArray = [
        [`${ this.fileName || '云资源评价报表'}`],
        // this.value && this.value.split(','),
        //   // ['姓名', '性别', '年龄', '注册时间'],
	      //   ['张三', '男', 18, 'aa'],
	      //   ['李四', '女', 22, '232:23']
        ];
        let tableData = []
        this.tableData.forEach(t => {
          let arr = []
          if (!this.value) {
            tableHeader = []
          }
          for (const i in t) {
            arr.push(t[i])
            if (!this.value) {
              tableHeader.push(i)
            }
          }
          tableData.push(arr)
        })
        jsonDataArray = jsonDataArray.concat([tableHeader], tableData)
        return jsonDataArray
      // }
    },
    async downloadBmExcel(){
      const jsonDataArray = await this.formatExcel()
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.aoa_to_sheet(jsonDataArray);
      const len = jsonDataArray[1] && jsonDataArray[1].length || 10
      const merge = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: len - 1 } },
      ]
      worksheet['!merges'] = merge;
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, `${this.fileName || '云资源评价报表'}.xlsx`, {bookType: 'xlsx', type: 'buffer' }, );
    },
    async preview(type = '') {
      const jsonDataArray = await this.formatExcel()
      // console.log(window.location,'====window.location')
      let url = `${this.contextPath}/index.html#/preview/office?content=${encodeURIComponent(JSON.stringify(jsonDataArray))}`
      if (type === 'print') {
        url = url +'&type=print'
      }
      window.open(url)
    },
    rendered() {
      this.$message.success('加载完成')
    }
  }
}
</script>

<style lang="scss" scoped>
.excel_container {
    display: flex;
    .left {
      flex: 1;
    }
    .el-button {
      margin-left: 5px;
    }
  }
</style>
